<template>
  <div class="ty-weather">
    <span class="datetime">{{ currentDate }}</span>
    <span class="datetime">{{ currentDay }}</span>
    <span class="datetime">{{ currentTime }}</span>
  </div>
</template>

<script>
import dayjs from "dayjs";

export default {
  name: "TyWeather",
  data() {
    return {
      currentDate: dayjs().format("YYYY年MM月DD日"),
      currentTime: dayjs().format("HH:mm"),
      currentDay: "",
    };
  },
  created() {
    this.getCurrentDay();
    this.timer = setInterval(() => {
      this.currentDate = dayjs().format("YYYY年MM月DD日");
      this.currentTime = dayjs().format("HH:mm");
      this.getCurrentDay();
    }, 1000);
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
  },
  destroyed() {
    this.timer && clearInterval(this.timer);
  },
  methods: {
    getCurrentDay() {
      const d = new Date().getDay();
      const weeks = ["日", "一", "二", "三", "四", "五", "六"];
      this.currentDay = `星期${weeks[d]}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.ty-weather {
  padding: 6px 0 20px 20px;
  font-size: 16px;
  font-weight: 400;
  color: #e2f5fd;
  .datetime {
    padding-right: 10px;
  }
}
</style>
